【CSS】:nth-child（擬似クラス） - N番目の要素

CSSの擬似クラス/nth-childについて解説します。

検証環境

CSS

macOS

14.1

nth-child

擬似クラス/nth-childは“兄弟要素のN番目の要素を表す擬似クラス”です。

基本構文

:nth-child(N) {
    プロパティ名: プロパティ値;
}

Nの部分は番目です。

番目の表現形式は次の種類があります。

形式	意味
N	任意の数値
odd	奇数番目
even	偶数番目
An+B	A: 整数、B: 整数、n: 0から始まる自然数

サンプル

次のHTMLドキュメントに対するnth-childのサンプルを示します。

sample.html

<section>
    <h2>セレクター</h2>
    <p>セレクターは『スタイルを適用する要素』です。</p>
    <h2>プロパティ名</h2>
    <p>プロパティ名は『スタイルの種類』です。</p>
    <h2>プロパティ値</h2>
    <p>プロパティ値は『スタイルの値』です。</p>
</section>

任意の数値

『h2かつ３番目の要素』を指定するセレクターのサンプルです。

sample.css

___ih_hl_start
h2:nth-child(3) {
___ih_hl_end
    color: red;
}

プレビュー

奇数番目

『h2かつ奇数番目の要素』を指定するセレクターのサンプルです。

sample.css

___ih_hl_start
h2:nth-child(odd) {
___ih_hl_end
    color: red;
}

プレビュー

偶数番目

『pかつ偶数番目の要素』を指定するセレクターのサンプルです。

sample.css

___ih_hl_start
p:nth-child(even) {
___ih_hl_end
    color: red;
}

プレビュー

倍数

『h2かつ５の倍数番目の要素』を指定するセレクターのサンプルです。

sample.css

___ih_hl_start
h2:nth-child(5n) {
___ih_hl_end
    color: red;
}

プレビュー

An+B

『h2かつ3n+1（1,4,7...）番目の要素』を指定するセレクターのサンプルです。

sample.css

___ih_hl_start
h2:nth-child(3n+1) {
___ih_hl_end
    color: red;
}

プレビュー